<template>
	<view class="page-message">
		<cl-topbar :show-back="false" title="酷聊">
			<template slot="prepend">
				<cl-dropdown custom-class="op" :visible.sync="op.visible">
					<view class="cl-topbar__icon">
						<text class="iconfont icon-add-circle" @tap="op.visible = true"></text>
					</view>

					<template slot="dropdown">
						<view class="op" @tap="op.visible = false">
							<view class="cl-dropdown__item">
								<text class="iconfont icon-chat"></text>
								<text>发起聊天</text>
							</view>
							<view class="cl-dropdown__item">
								<text class="iconfont icon-create"></text>
								<text>创建群聊</text>
							</view>
							<view class="cl-dropdown__item">
								<text class="iconfont icon-add-friend"></text>
								<text>邀请好友</text>
							</view>
							<view class="cl-dropdown__item">
								<text class="iconfont icon-scan"></text>
								<text>扫一扫</text>
							</view>
						</view>
					</template>
				</cl-dropdown>
			</template>
		</cl-topbar>

		<view class="container">
			<scroll-view scroll-y class="scroller">
				<view class="search">
					<cl-input
						:border="false"
						prefix-icon="cl-icon-search"
						round
						placeholder="搜索"
						clearable
					></cl-input>
				</view>

				<view class="block" @click="toChat" v-for="(item, index) in list" :key="index">
					<message-list :item="item"></message-list>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import MessageList from '@/components/message-list';

export default {
	components: {
		MessageList
	},

	data() {
		return {
			list: [
				{
					avatarUrl:
						'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg',
					name: '海上霸主',
					message: '您有一个红包待领取',
					date: '00:22',
					badge: 12
				},
				{
					avatarUrl:
						'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/4.jpg',
					name: '神仙都没用',
					message: '嗯嗯，好',
					date: '30:16',
					badge: 1
				}
			],

			op: {
				visible: false
			}
		};
	},

	methods: {
		toChat() {
			uni.navigateTo({
				url: '/pages/chat/session'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	overflow: hidden;
}

.page-message {
	display: flex;
	flex-direction: column;
	height: 100%;

	.cl-topbar {
		flex-shrink: 0;
		&__icon {
			position: relative;

			.icon-add-circle {
				font-size: 55rpx;
			}
		}
	}

	.op {
		.cl-dropdown__item {
			.iconfont {
				font-size: 46rpx;
				margin-right: 15rpx;
			}
		}
	}

	.container {
		flex: 1;
		overflow: hidden;

		.scroller {
			height: 100%;

			.search {
				padding: 25rpx 38rpx;

				/deep/.cl-input {
					background-color: #f8f8f8;
				}
			}
		}
	}
}
</style>